<template>
    <div class="text_list_box">
        <el-table
            ref="tableRef"
            :data="tableData.data"
            height="504"
            max-height="550"
            tooltip-effect="light"
            class="table_box"
            header-row-class-name="table_header_title">
            <el-table-column width="50px" align="center">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <el-checkbox v-model="scope.row.isCheck" @change="chooseText(scope.row)"></el-checkbox>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="200" align="'center'"> </el-table-column>
            <el-table-column show-overflow-tooltip prop="content" label="内容" align="'center'"> </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { defineEmits, watch, defineProps } from 'vue';

const emit = defineEmits(['getData']);
const props = defineProps(['pageData', 'chooseData']);
const tableData = reactive({ data: JSON.parse(JSON.stringify(props.pageData)) });
watch(
    () => props.pageData,
    val => {
        tableData.data = JSON.parse(JSON.stringify(val));
    }
);
let arr = [];
const chooseText = (selection: any) => {
    if (selection.isCheck) {
        selection.is_local = 0;
        arr.push(selection);
        // if(arr.length > 1){
        //   let index = tableData.data.findIndex(it=>{return it.id === arr[0].id});
        //   tableData.data[index].isCheck = false;
        //   arr.splice(0,1);
        // }
        // console.log(arr,55)
        emit('getData', {
            type: 'text',
            data: arr
        });
    } else {
        arr = [];
        selection.isCheck = false;
        emit('getData', {
            type: 'text',
            data: []
        });
    }
};
</script>

<style lang="scss" scoped>
.text_list_box {
    width: 100%;
}
</style>
<style lang="scss">
.el-popper {
    max-width: 30%;
}

.text_list_box {
    .el-table--scrollable-y ::-webkit-scrollbar {
        display: none;
    }

    .table_header_title {
        th.el-table__cell {
            background: #f9f9f9;
            padding: 10px 0;
        }
    }
}
</style>
